<link rel='stylesheet' type='text/css' href='<?php echo $this->baseUrl() ?>/public/css/input.css'/>
<link rel='stylesheet' type='text/css' href='<?php echo $this->baseUrl() ?>/public/css/jquery-ui/jquery-ui-1.10.3.css'/>

<div id="input-content">
    <form id='general_info' method='POST' enctype="multipart/form-data">
        <div class="input-step" id="wrap-general-info">
            <div class="step-content">
                <h1 class="first"> General information</h1>
                <div class="cleft">
                    <div class="item">
                        <label for='refno'>Ref No.</label>
                        <div class="reselect">
                            <span><?php echo $this->ref_no ?></span>
                            <input type="hidden" value="<?php echo $this->ref_no ?>" name="ref_no"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="customer_name">Principal name</label>
                        <div class="reselect">
                            <select name="customer_name" id='customer_name'>
                                <option value='-1'>--Select Principal Name--</option>
                                <?php foreach ($this->customers as $customer): ?>
                                    <br>
                                    <?php echo $customer->id ?>
                                    <br/>
                                    <option value='<?php echo $customer->id ?>'><?php echo $customer->fullname ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for="vessel">Attn</label>
                        <div class="reselect">
                            <input type="text" name='attn' id='vessel' placeholder="Enter Text"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="vessel">Vessel name</label>
                        <div class="reselect">
                            <input type="text" name='vessel' id='vessel' placeholder="Enter Text"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for='purpose_of_call'>Purpose of Call</label>
                        <div class="reselect">
                            <select name='purpose_of_call' id="purpose_of_call">
                                <?php foreach ($this->purpose_of_calls as $purpose_of_call): ?>
                                    <option value='<?php echo $purpose_of_call['name'] ?>'><?php echo $purpose_of_call['name'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for="gtr">GRT</label>
                        <div class="reselect">
                            <input type="text" name='gtr' id='gtr' placeholder="Enter Text"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for='port_of_call'>Port of Call</label>
                        <div class="reselect">
                            <select name='port_of_call' id="port_of_call">
                                <option value='-1'>--Select Port--</option>
                                <?php foreach ($this->ports as $port): ?>
                                    <option value='<?php echo $port->id ?>'><?php echo $port->name ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for='buoy'>Buoy/Berth</label>
                        <div class="reselect">
                            <select name='buoy' id="buoy">
                                <option value='-1'>--Select Buoy--</option>
                                <?php foreach ($this->buoys as $buoy): ?>
                                    <option value="<?php echo $buoy->id ?>"><?php echo $buoy->name ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for='last_port_of_call'>Last Port of Call</label>
                        <div class="reselect">
                            <select name='last_port_of_call' id="last_port_of_call">
                                <option value='-1'>--Select Port--</option>
                                <?php foreach ($this->countries as $country): ?>
                                    <option value='<?php echo $country ?>'><?php echo $country ?></option>
                                <?php endforeach; ?>
                                <?php foreach ($this->ports as $port): ?>
                                    <option value='<?php echo $port->name ?>'><?php echo $port->name ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for='next_port_of_call'>Next Port of Call</label>
                        <div class="reselect">
                            <select name='next_port_of_call' id="next_port_of_call">
                                <option value='-1'>--Select Port--</option>
                                <?php foreach ($this->countries as $country): ?>
                                    <option value='<?php echo $country ?>'><?php echo $country ?></option>
                                <?php endforeach; ?>
                                <?php foreach ($this->ports as $port): ?>
                                    <option value='<?php echo $port->name ?>'><?php echo $port->name ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for='commodities'>Commodities</label>
                        <div class="reselect">
                            <select name='commodities' id="commodities">
                                <?php foreach ($this->commodities as $commodity): ?>
                                    <option value='<?php echo $commodity ?>'><?php echo $commodity ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label for='quantity'>Quantity</label>
                        <div class="reselect">
                            <select id='quantity_unit' name='quantity_unit' style='width: 25%;float:right'>
                                <?php foreach ($this->units as $unit): ?>
                                    <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                <?php endforeach; ?>
                            </select>
                            <input type="text" name='quantity' id='quantity'style='width: 70%;margin-right: 10px;' placeholder="Enter Number"/>
                        </div>
                    </div>
                </div>
                <div class="cright">
                    <div class="item">
                        <label for="voyage_no">Voyage No.</label>
                        <div class="reselect">
                            <input type="text" name='voyage_no' id='voyage_no' placeholder="Enter Text"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="flag">Flag</label>
                        <div class="reselect">
                            <input type="text" name='flag' id='flag' placeholder="Enter Text"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="eta">ETA</label>
                        <div class="reselect">
                            <input type="text" name='eta' id='eta' class='datetime' placeholder="Enter Datetime"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="ata">ATA</label>
                        <div class="reselect">
                            <input type="text" name='ata' id='ata' class='datetime' placeholder="Enter Datetime"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="etb">ETB</label>
                        <div class="reselect">
                            <input type="text" name='etb' id='etb' class='datetime' placeholder="Enter Datetime"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="atb">ATB</label>
                        <div class="reselect">
                            <input type="text" name='atb' id='atb' class='datetime' placeholder="Enter Datetime"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="ets">ETS</label>
                        <div class="reselect">
                            <input type="text" name='ets' id='ets' class='datetime' placeholder="Enter Datetime"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="ats">ATS</label>
                        <div class="reselect">
                            <input type="text" name='ats' id='ats' class='datetime' placeholder="Enter Datetime"/>
                        </div>
                    </div>
                    <div class="item">
                        <label for="vessel_on_arrival">Vessel on Arrival</label>
                        <div class="reselect">
                            <input type="file" name='vessel_on_arrival' id="vessel_on_arrival" onchange="checkFileSize(event)"/>
                            <?php if (isset($this->general_information)): ?>
                                <div style="width: 60%">
                                    <img alt="No image" height="10%" style='padding:10px 0px;' src="<?php echo UPLOAD_URL . $this->general_information['ship_on_arrival'] ?>"/>
                                </div>
                            <?php endif; ?>       
                        </div>
                    </div>
                    <div class="item">
                        <label for="vessel_on_arrival">Vessel on Departure</label>
                        <div class="reselect">
                            <input type="file" name='vessel_on_departure' id="vessel_on_departure" onchange="checkFileSize(event)"/>
                            <?php if (isset($this->general_information)): ?>
                                <div style="width: 60%">
                                    <img alt="No image" height="10%" style='padding:10px 0px;' src="<?php echo UPLOAD_URL . $this->general_information['ship_on_departure'] ?>"/>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div style="clear: both;">&nbsp;</div>
                <span id="wrap-cargo-operations">
                    <h1 class="first"> Cargo operations</h1>
                    <div class="cleft" style="width: 70%; border-right: none">
                        <div class="item">
                            <label for="net_weight">Commenced cargo ops</label>
                            <div class="reselect">
                                <input type="text" name="commenced_cargo" placeholder="Enter Datetime" id="commenced_cargo" class="datetime"/>
                            </div>
                        </div>          
                        <div class="item">
                            <label for="gross_weight">Completed cargo ops</label>
                            <div class="reselect">
                                <input type="text" name="completed_cargo" placeholder="Enter Datetime" id="completed_cargo" class="datetime"/>
                            </div>
                        </div>  
                        <span id='wrap_loaded_cargo'>
                            <div class="item">
                                <label for="total_cargo_loaded_last_24h">Total cargo loaded last 24 hour</label>
                                <div class="reselect">
                                    <input type="text" name='total_cargo_loaded_last_24h' id='total_cargo_loaded_last_24h' placeholder="Enter Number"/>
                                    <select id='tcll24h_unit' name='tcll24h_unit' style='width: 25%;float:right'>
                                        <?php foreach ($this->units as $unit): ?>
                                            <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="item">
                                <label for="total_cargo_loaded_uptodate">Total cargo loaded up to date</label>
                                <div class="reselect">
                                    <input type="text" name='total_cargo_loaded_uptodate' id='total_cargo_loaded_uptodate' placeholder="Enter Number"/>
                                    <select id='tclutd_unit' name='tclutd_unit' style='width: 25%;float:right'>
                                        <?php foreach ($this->units as $unit): ?>
                                            <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </span>
                        <span id='wrap_discharged_cargo' style='display:none'>
                            <div class="item">
                                <label for="total_cargo_discharged_last_24h">Total cargo discharged last 24 hour</label>
                                <div class="reselect">
                                    <input type="text" name='total_cargo_discharged_last_24h' id='total_cargo_discharged_last_24h' placeholder="Enter Number"/>
                                    <select id='tcdl24h_unit' name='tcdl24h_unit' style='width: 25%;float:right'>
                                        <?php foreach ($this->units as $unit): ?>
                                            <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="item">
                                <label for="total_cargo_discharged_uptodate">Total cargo discharged up to date</label>
                                <div class="reselect">
                                    <input type="text" name='total_cargo_discharged_uptodate' id='total_cargo_discharged_uptodate' placeholder="Enter Number"/>
                                    <select id='tcdutd_unit' name='tcdutd_unit' style='width: 25%;float:right'>
                                        <?php foreach ($this->units as $unit): ?>
                                            <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </span>
                        <div class="item">
                            <label for="net_weight">Net weight</label>
                            <div class="reselect">
                                <input type="text" name="net_weight" placeholder="Enter Number" id="net_weight"/>
                                <select id='net_weight_unit' name='net_weight_unit' style='width: 25%;float:right'>
                                    <?php foreach ($this->units as $unit): ?>
                                        <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>          
                        <div class="item">
                            <label for="gross_weight">Gross weight</label>
                            <div class="reselect">
                                <input type="text" name="gross_weight" placeholder="Enter Number" id="gross_weight"/>
                                <select id='gross_weight_unit' name='gross_weight_unit' style='width: 25%;float:right'>
                                    <?php foreach ($this->units as $unit): ?>
                                        <option value='<?php echo $unit ?>'><?php echo $unit ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>  
                        <div class="item">
                            <label>Number of bags</label>
                            <div class="reselect">
                                <input type="text" name="bags_no" id="bags_no" placeholder="Enter Number" />
                            </div>
                        </div>    
                    </div>
                    <div style="clear: both;">&nbsp;</div>
                </span>
                <span id="wrap-crew-service" style="display:none">
                    <h1 class="first"> Crew Service</h1>
                    <div class="cleft" style="width: 100%; border-right: none">
                        <div class="item">
                            <label style="width: 19.5%;">On-signers status</label>
                            <div class="reselect" style="float:left">
                                <select id='on_signer_status' name='on_signer_status' style='width: 50%;'>
                                    <?php foreach ($this->crew_statuses as $crew_status): ?>
                                        <option value="<?php echo $crew_status['name'] ?>"><?php echo $crew_status['name'] ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <input style="width: 40%" type="text" name="on_signer_status_date" placeholder="Enter Datetime" id="on_signer_status_date" class="datetime"/>
                            </div>
                        </div>  
                        <div class="item">
                            <label style="width: 19.5%;">Off-signers status</label>
                            <div class="reselect" style="float:left">
                                <select id='off_signer_status' name='off_signer_status' style='width: 50%;'>
                                    <?php foreach ($this->crew_statuses as $crew_status): ?>
                                        <option value="<?php echo $crew_status['name'] ?>"><?php echo $crew_status['name'] ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <input style="width: 40%" type="text" name="off_signer_status_date" placeholder="Enter Datetime" id="off_signer_status_date" class="datetime"/>
                            </div>
                        </div>   
                    </div>
                    <div style="clear: both;">&nbsp;</div>
                </span>
                <span id="wrap-dunnage" style="display:none">
                    <h1 class="first"> Dunnage</h1>
                    <div class="cleft" style="width: 70%; border-right: none">
                        <div class="item">
                            <label style="width: 28%;">Commenced dunnage</label>
                            <div class="reselect" style="float:left">
                                <input type="text" name="commenced_dunnage" placeholder="Enter Datetime" id="commenced_dunnage" class="datetime"/>
                            </div>
                        </div>
                        <div class="item">
                            <label style="width: 28%;">Completed dunnage</label>
                            <div class="reselect" style="float:left">
                                <input type="text" name="completed_dunnage" placeholder="Enter Datetime" id="completed_dunnage" class="datetime"/>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both;">&nbsp;</div>
                </span>
                <span id="wrap-daily-photos">
                    <h3 class="table"> Daily photos</h3>
                    <div id="new-photo">
                        <span id="mask-new-photo"></span>
                        <div id="upload-photo-progress" style="display:none"></div>
                    </div>
                    <div class="file-wrapper" style="padding-top:10px">
                        <div class="file-wrapper" style="padding-top:10px" id="wrap_upload_photo">
                            <span class="button" id="add_photo">Add Files</span>          
                        </div>    
                    </div>  
                    <div style="clear: both;">&nbsp;</div>
                </span>
                <span id="wrap-cargo-docs">
                    <h3 class="first" id="document-title"> Cargo documents</h3>
                    <div id="new-document">
                        <span id="mask-new-document"></span>
                        <div id="upload-document-progress" style="display:none"></div>
                    </div>
                    <div class="file-wrapper" style="padding-top:10px">
                        <div class="file-wrapper" style="padding-top:10px" id="wrap_upload_document">
                            <span class="button" id="add_document">Add Files</span>          
                        </div>    
                    </div>  
                    <div style="clear: both;">&nbsp;</div>
                </span>
                <h1 class="first"> Remittances detail</h1>
                <table id="tbl_remittances" width="100%" border="0" cellpadding="0" cellspacing="0" class="row">
                    <tr>
                        <th scope="col" class="number" width="5%">Remittance No.</th>
                        <th scope="col" class="type" width="15%">From</th>
                        <th scope="col" class="type" width="15%">Date</th>
                        <th scope="col" class="type" width="5%">Amount</th>
                        <th scope="col" class="type" width="15%">Remarks</th>
                        <th scope="col" class="type" width="4%"></th>
                    </tr>
                </table>
                <p>
                    <a href="javascript:void(0)" onclick="moreRem()">
                        <img src="<?php echo $this->baseUrl() ?>/public/images/plus.png">
                        Add more
                    </a>
                </p>
                <h1 class="first"> Services</h1>
                <table id="tbl_services" width="100%" border="0" cellpadding="0" cellspacing="0" class="row">
                    <tr>
                        <th scope="col" class="number" width="10%">Service No.</th>
                        <th scope="col" class="type" width="15%">Description of Port Expenses</th>
                        <th scope="col" class="type" width="15%">Invoice number</th>
                        <th scope="col" class="type" width="15%">Amount in USD</th>
                        <th scope="col" class="type" width="15%">Remarks</th>
                        <th scope="col" class="type" width="4%"></th>
                    </tr>
                </table>
                <p>
                    <a href="javascript:void(0)" onclick="moreService()">
                        <img src="<?php echo $this->baseUrl() ?>/public/images/plus.png">
                        Add more
                    </a>
                </p>
            </div>
        </div>
        <div style="text-align:right">
            <input type='submit' value='Save' class="submit"/>
        </div>
    </form>
</div>
<table id="new_remittance" style="display:none">
    <tr>
        <td>
            0
        </td>
        <td>
            <input type="text" class="entertext" placeholder="Principal"/>
        </td>
        <td>
            <input type="text" class="datetime entertext" placeholder="datetime"/>
        </td>
        <td>
            <input type="text" class="entertext" placeholder="USD"/>
        </td>
        <td width='4%'>
            <a href='javascript:void(0)'>
                <img src='<?php echo $this->baseUrl() ?>/public/images/delete.gif'/>
            </a>
        </td>
    </tr>
</table>
<table id="new_service" style="display:none">
    <tr>
        <td class="service_no">
            0
        </td>
        <td>
            <select name="ser_services[]">
                <?php foreach ($this->services as $service): ?>
                    <option value="<?php echo $service->id ?>"><?php echo $service->name ?></option>
                <?php endforeach; ?>
            </select>
        </td>
        <td>
            <input type="text" class="entertext" placeholder="number" name="ser_vouchers[]"/>
        </td>
        <td>
            <input type="text" class="entertext" placeholder="USD" name="ser_amounts[]"/>
        </td>
        <td>
            <input type="text" class="entertext" placeholder="text" name="ser_remarks[]"/>
        </td>
        <td width='4%'>
            <a href='javascript:void(0)' onclick="deleteServiceRow(event)">
                <img src='<?php echo $this->baseUrl() ?>/public/images/delete.gif'/>
            </a>
        </td>
    </tr>
</table>
<script>
                                var ref_no = '<?php echo $this->ref_no ?>';
                                var upload_url = '<?php echo UPLOAD_URL ?>';
</script>
<script src='<?php echo $this->baseUrl() ?>/public/js/jquery-ui-1.10.3.js'></script>
<script src='<?php echo $this->baseUrl() ?>/public/js/timepicker.js'></script>
<script src='<?php echo $this->baseUrl() ?>/public/js/generalinfo.js'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.gears.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.silverlight.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.flash.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.browserplus.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.html4.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/plupload/plupload.html5.js"></script>
<style>
    .ui-progressbar {
        width: 200px;
        height: 10px;
    }
</style>
<script>
    $("#purpose_of_call").change(function() {
        var purpose = $(this).val();
        if (purpose == 'Crew change') {
            $("#document-title").text("Crew documents");
        } else {
            $("#document-title").text("Cargo documents");
        }
    });
</script>